<template>
  <a-modal :title="'添加颜色'" :visible="true" width="60%" :footer="null" @cancel="reset">
    <div class="main">
      <a-card title="颜色列表">
        <template #extra>
          <a-button type="primary" @click="onSubmit" style="margin-left:10px">保存</a-button>
        </template>
        <a-table bordered :loading="loading" :pagination="false"
          :row-selection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows, onChange: onSelectChange }"
          :columns="columns" :data-source="dataSource">
        </a-table>
      </a-card>
    </div>
  </a-modal>
</template>
    
<script>
const columns = [
  {
    title: '颜色名称',
    dataIndex: 'mcname',
  },
  {
    title: '产品编号',
    dataIndex: 'mcvc1'
  },
  {
    title: '色号',
    dataIndex: 'mcvc2'
  }
]
export default {
  components: {
  },

  props: {
    sccode: {
      type: String,
      default: null,
      required: false,
    },
  },

  data() {
    return {
      columns,
      dataSource: [],
      seasonList: [],
      patternList: [],
      selectedRowKeys: [],
      selectedRows: [],
      urlKey: 'basemgt-material/',
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
      backList: [],
      disabled: false,
      ifEdit: false,
      form: {
        mcid: undefined,
        mcname: '',
        mcseason: undefined,
        mcvc4: undefined,
        mcmemo: '',
        mcsx: 0,
        mcvc1: '',
        mcinputor: '',
      },
      rules: {
        mcid: [{ required: true, message: '请输入销售色', trigger: 'blur' }],
        manufactorColorCode: [{ required: true, message: '请输入厂家色号', trigger: 'blur' }]
      },
      loading: false
    }
  },

  created() {
    const { sccode } = this.$props
    if (!sccode) {
      this.$message.error('请先输入产品编号！')
    } else {
      this.handleSearch(sccode)
    }

  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  methods: {
    onSelectChange(selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
      console.log(this.selectedRows)
    },
    reset() {
      this.$emit('closeColor')
    },

    onSubmit() {
      this.$emit('closeColor', this.selectedRows)

    },
    async handleSearch(sccode) {
      const params = { sccode: sccode }
      this.$http({
        url: 'api/gateway/basemgt-material/cloth-order/ordervalidcolorlist',
        method: 'post',
        params: params
      })
        .then(res => {
          if (res.code == 200) {
            this.dataSource = res.data
          } else {
            if (res.msg) {
              this.$message.error(res.msg)
            } else {
              this.$message.error('获取颜色列表失败！')
            }
          }
        })

    },
  }
}
</script>
<style scoped>
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
}

.ml-20 {
  margin-left: 20px;
}

.dynamic-delete-button {
  cursor: pointer;
  position: absolute;
  right: -40px;
  top: -4px;
  font-size: 24px;
  color: #999;
  transition: all 0.3s;
}

.dynamic-delete-button:hover {
  color: #777;
}

.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
</style>